<template>
  <div class="wrap">
    <div id="navBar">
      <ul class="navWrap">
        <li @click="comName = 'Order';ac = 0;" :class="{active: ac===0}">
            <span class="iconfont">&#xe70e;</span>
            <span class="text">已点</span>
        </li>
        <li @click="comName = 'payOrder';ac = 1;" :class="{active: ac===1}">
            <span class="iconfont">&#xe621;</span>
            <span class="text">已下单</span>
        </li>
      </ul>
      <div class="search">
        <input type="text">
        <button>
          <span class="iconfont">&#xe63e;</span>
        </button>
      </div>
    </div>
    <component :is="comName"></component>
  </div>
</template>

<script>
import Order from '@/components/Orders/order.vue'
import payOrder from '@/components/Orders/payOrder.vue'
export default {
  name: 'orderBar',
  inject: ['reload'],
  components: {
    Order,
    payOrder
  },
  data () {
    return {
      // 默认展示的组件
      comName: 'Order',
      // 控制导航栏样式变化
      ac: 0
    }
  }
}
</script>

<style scoped>

</style>
